/* radio */
.demo--label{margin:20px 20px 0 0;display:inline-block;float: right}
.demo--radio{display:none}
.demo--radioInput{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:16px;margin-right:10px;margin-top:-20px;vertical-align:middle;width:16px;line-height:1}
.demo--radio:checked + .demo--radioInput:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;height:12px;margin:2px;width:12px}
.demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{border-radius:0}
/* checkbox */
.regular-checkbox {
    display: none;
}

.regular-checkbox + label {
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked + label {
    background-color: #666666;
    border: 1px solid #adb8c0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
    color: #99a1a7;
}

.regular-checkbox:checked + label:after {
    content: '\2714';
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #99a1a7;
}
.welcome-box-plain {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D8D8D8;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 0 1px 4px #D3D3D3;
    margin-top: 20% ;
    margin-left: -25% ;
    position: relative;
    min-height: 770px;
    width: 160%;
}
#welcomeLoge{
    height: 233.333333px;
    background: #DDDDDD;
    padding-top:10%;
}
#welcomeText{
    height: 200.333333px;
    text-align: center;
    padding-top: 10%;
    color:#456177;
    font-family : 微软雅黑,宋体;
    font-size : 3.5em;
}
#welcomeButton{
    height: 266.333333px;
    text-align: center;
}
.welcomeButtonIn1{
    background: #3B8ED0;
    color: #FFFFFF;
    text-align: center;
    font-weight: 500;
    font-size: 25px;
    width: 45%;
    height: 25%;
    border-radius: 15px;
    border: solid red 0px;
    margin-top: 2.5%;
}
.welcomeButtonIn2{
    background: #FFFFFF;
    color: #7F7F7F;
    text-align: center;
    font-weight: 500;
    font-size: 25px;
    width: 45%;
    height: 25%;
    border-radius: 15px;
    border: solid #7F7F7F 1px;
    margin-top: 2.5%;
}
.guide{
    height: 190px;
    text-align: center;
}
.guideImg{
    margin-top: 5%;
}
.connect{
    height: 510px;
}
.connectline{
    margin-top: 1.5%;
    margin-left: 8%;
}
.connectway{
    width: 20%;
    height: 95%;
    float: left;
    margin-top: 1.5%;
    padding-left: 5%;
}
.selectconnect{
    width:100%;
    height: 10%;
    color:#BDBDBD;
    font-size: 18px;
    font-weight: 400;
}
.next{
    height: 70px;
    text-align: right;
}
.nextbutton{
    width: 20%;
    height: 100%;
    background: #38475A;
    color:#FFFFFF;
    font-size: 18px;
    border: 0px;
}
.upbutton{
    width: 20%;
    height: 100%;
    background: #D5D8DF;
    color:#ABABAB;
    font-size: 18px;
    border: 0px;
}
.skipbutton{
    width: 20%;
    height: 100%;
    background: #EFEFEF;
    color:#ABABAB;
    font-size: 18px;
    border: 0px;
}
.selectoption{
    margin-top: 10%;
}
.optionway{
    font-size: 16px;
    border: 0px;
    color:#666666;
    width: 85%;height: 100%;float: right;
    padding-left: 5%;
}
.connectdetail{
    width: 60%;
    height: 100%;
    float: right;
    margin-right: 8%;

}
.connectbutton{
    float: right;margin-top: -8.5%;background: #3E8CCE;color: #C8E3ED;border: 0px;width: 20%;height: 50%;
}
.loadinggif{
    margin-left: 65%;
    margin-top: -16%;
}
.wifipng{
    width: 20%;height: 100%
}
.connecttitle{
    width:100%;
    height:11%;
    padding-left: 2%;
    padding-top: 3%;
    font-size: 16px;
    font-weight: 300;
    color: #acacac;
}
.availableconnect{
    width:100%;
    height:13%;
    font-size: 17px;
    font-weight: 300;
    border-top: solid #d6d6d6 1px;
}
.wifi-guide{
    width: 40%;
    height: 50%;
    margin-left: 22%;
    margin-top: -11%;
    padding-top: 2%;
    color: #93BAE9;
    font-weight: 400;
}
.wifi-detail{
    width: 40%;
    height: 50%;
    margin-left: 22%;
    color: #949494;
}
.availableconnectbottom{
    width:100%;
    height:13%;
    font-size: 17px;
    font-weight: 300;
    border-top: solid #d6d6d6 1px;
    display:block;
}
.passwordtextnone{
    display:none;width: 100%;height: 10%;font-size: 17px;font-weight: 300;

}
#passwordtextnone1{
    display:none;width: 100%;height: 10%;border-bottom: solid #d6d6d6 1px;
}
#passwordtextnone2{
    display:none;width: 100%;height: 10%;border-bottom: solid #d6d6d6 1px;
}
#passwordtextnone3{
    display:none;width: 100%;height: 10%;border-bottom: solid #d6d6d6 1px;
}
#passwordtextnone4{
    display:none;width: 100%;height: 10%;border-bottom: solid #d6d6d6 1px;
}
#passwordtextnone5{
    display:none;width: 100%;height: 10%;
}
.passwordtitle{
    float: left;margin-top: 2%;margin-left: 4%;
}
.form-control{
    margin-top:1.5%;float:right;height: 60%;width: 30%;margin-right: 50%
}
.guideinfoimg{
    width: 29%;
    height: 82%;
    float: left;
    margin-top:3%;
    margin-left:8%;
    background: #FAFAFA;
}
.guideinfodetail{
    width: 50%;
    height: 100%;
    float: right;
    padding-top: 3%;
    padding-right: 3%;
    margin-right: 3%;
}
.upmethod{
    width: 100%;
    height: 8%;
    margin-top: 1.5%;
    padding-right: 5%;
    padding-left: 5%;
}
.radioup{
    width: 21%;
    height: 100%;
    float: left;
    padding-left: 5%;
}
.upname{
    background: #F5F5F5;
    width: 15%;
    height: 90%;
    margin-top: 0.5%;
    float: left;
    font-size: 16px;
    color:#B6B6B6;
    border: solid #B6B6B6 1px;
    border-radius: 5px;
    text-align: center;
    padding-top: 0.8%;
}
.upinfo{
    width: 23%;
    height: 100%;
    float: left;
    margin-left: 2%;
}
.portname{
    background: #F5F5F5;
    width: 8%;
    height: 90%;
    margin-top: 0.5%;
    float: left;
    font-size: 16px;
    color:#B6B6B6;
    border: solid #B6B6B6 1px;
    border-radius: 5px;
    text-align: center;
    padding-top: 0.8%;
    margin-left: 4%;
}
.portinfo{
    width: 15%;
    height: 100%;
    float: left;
    margin-left: 2%;
}
.portbutton{
    width: 15%;
    height: 100%;
    float: left;
    margin-left: 2%;
}
.protconnectbutton{
    width: 100%;
    height: 95%;
    font-size: 18px;
    font-weight: 500;
    background: #398FCF;
    color: #FFFF;
    border-radius: 10px;
}
.setting-up-picture{
    width: 80%;
    height: 50%;
    margin-top: 1.5%;
    background: #FAFAFA;
    margin-left: 10%;
}
.setting-up-state{
    width: 80%;
    height: 10%;
    background: #FDEFEE;
    margin-left: 10%;
    font-weight: 500;
    font-size: 18px;
    padding-top: 1%;
    padding-left: 35%;
    color:#D89BA2 ;
    font-style: italic;
}
.dustguide{
    width: 87%;
    margin-left: 6.5%;
    height: 10%;
}
.dust-title{
    width: 10%;
    height: 100%;
    color:#A5A5A5 ;
    font-size: 22px;
    font-weight: 400;
    padding-top: 2%;
    padding-left: 3%;
    float: left;
}
.dust-second{
    width: 40%;
    height: 100%;
    color:#A5A5A5 ;
    font-size: 18px;
    font-weight: 400;
    padding-top: 2.3%;
    padding-left: 3%;
    float: left;
}
.dust-connect-button{
    float: right;
    width: 10%;
    height: 70%;
    margin-top: 2%;
    background:#3590D6;
    color: #FFFF;
    border:solid #d3d3d3 1px;
    border-radius: 5px;
}
.reset-button{
    float: right;
    width: 10%;
    height: 70%;
    margin-top: 2%;
    background: #FAFAFA;
    color: #5F5F5F;
    border:solid #bebebe 1px;
    margin-right: 2%;
    border-radius: 5px;
}
.endguide{
    font-weight: 400;
    font-size: 28px;
    color: #7D7D7D;
}
.endButton{
    background: #7F7F7F;
    color: #FFFFFF;
    text-align: center;
    font-weight: 500;
    font-size: 25px;
    width: 45%;
    height: 25%;
    border-radius: 15px;
    border: solid #7F7F7F 1px;
    margin-top: 5%;
}

.apply-button{
    width: 100px;
    height: 25px;
    background: #1C8EFF;
    border: 0;
    border-radius: 3px;
    margin-top: 12px;
    color: #FFFF;
}
.systemInfo{
    width: 100%;
    height: 1150px;
    padding: 0.5% 18%;
    margin-top: 0.5%;
}
.systemInfo-in{
    width: 100%;
    height: 100%;
    background-color: #F8F8F7;padding-left: 8%;padding-right: 8%;
}
.system-title{
    height: 5%;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    padding-left: 0.8%;
    color: #999999;
    padding-top:2%;
}
.user-title{
    height: 5%;
    width: 100%;
    font-size: 25px;
    font-weight: 400;
    color: #565656;
    border-bottom: solid #E4E4E3 1px;

}
.user-info{
    height: 4.5%;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    padding-left: 25%;
    padding-top: 1.5%;
    color: #565656;

}
.system-title-second{
    height: 5%;
    width: 100%;
    font-size: 30px;
    font-weight: 400;
    padding-left: 0.8%;
    padding-top: 0.8%;
    color: #565656;
    margin-top: 1%;
}
.Uplink-Status{
    height: 16%;
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    padding-left: 25%;
    padding-top: 1%;
    color: #565656;
}
.status-all{
    margin-top:-18%;float: left;margin-left:31%;width: 40%;height: 100%;font-size: 18px;
}
.status-left{
    width: 20%;height:100%;float: left;
}
.status-left-img{
    width: 20%;height:25%;
}
.status-right{
    width: 80%;height: 95%;float: right;
}
.status-detail{
    width: 100%;height: 16.66%;
}
.status-detail-title1{
    width: 20%;height: 100%;float: left;font-weight: 700;
}
.status-detail-info1{
    width: 120%;height: 100%;color: #0069D6;
}
.status-detail-title2{
    width: 20%;height: 100%;float: left;font-weight: 700;
}
.status-detail-info2{
    width: 80%;height: 100%;margin-left: 15%;
}
.status-detail-title3{
    width: 30%;height: 100%;float: left;font-weight: 700;
}
.status-detail-info3{
    width: 70%;height: 100%;
}
.status-detail-title4{
    width: 25%;height: 100%;float: left;font-weight: 700;
}
.status-detail-info4{
    width: 75%;height: 100%;
}
.status-detail-title5{
    width: 22%;height: 100%;float: left;font-weight: 700;
}
.status-detail-info5{
    width: 120%;height: 100%;margin-left: 15%;
}
.status-detail-title6{
    width: 30%;height: 100%;float: left;font-weight: 700;
}
.status-detail-info6{
    width: 70%;height: 100%;
}
.select-network{
    width: 100%;height: 10%;margin-top: -2%;
}
.select-network1{
    width: 100%;height: 50%;margin-top: 2.5%;
}
.select-network2{
    width: 100%;height: 50%;
}
.select-network-input{
    width: 40%;height: 100%;float: right;
}
.select-network-input1{
    width: 13%;height: 100%;float: left;margin-left: 5%;
}
.wlan-title{
    height: 10%;width: 100%;
}
.wlan-title1{
    border-bottom:solid #E4E4E3 1px;height: 60%;width: 100%;font-size: 18px;font-weight: 300;color: #565656;padding-left: 2%;padding-top: 2.2%;
}
.wlan-title2{
    height: 40%;width: 100%;
}
.wifi-list{
    width: 100%;height: 7%;border-top: solid #E4E4E3 1px;
}
.wifi-list2{
    width: 100%;height: 7%;border-top: solid #E4E4E3 1px;
}
.wifi-list3{
    width: 100%;height: 7%;border-top: solid #E4E4E3 1px;
}
.wifi-small-img{
    width: 10%;height: 100%;padding-top: 1%;padding-left: 2%;float: left;
}
.wifi-list-td{
    width: 20%;height: 100%;float: left;
}
.wifi-list-text{
    width: 100%;height: 50%;padding-top: 4%;padding-left: 10%;color: #808080;font-size: 18px;font-weight: 500;
}
.wifi-list-detail{
    width: 140%;height: 50%;padding-top: 1%;padding-left: 10%;color: #CECECE;font-size: 16px;
}
.small-connect{
    background: -moz-linear-gradient(bottom,#3B68B9,#398DD0);
    color: #FFFF;
    height: 50%;
    width: 10%;
    border-radius: 5px;
    border: solid red 0px;
    margin-left: 28%;
    margin-top: 2%;
}
.password-text{
    width: 100%;height: 5.5%;display: none;
}
.password-text2{
    width: 100%;height: 5.5%;display: none;
}
.password-text3{
    width: 100%;height: 5.5%;display: none;
}
.password-title{
    width: 10%;height: 100%;font-size: 20px;font-weight: 200;padding-left: 2%;padding-top: 1%;float: left;
}
.password-input{
    width: 10%;height: 100%;float: left;margin-left: 13%;
}
.second-title{
    width: 12%;height: 100%;float: left;color:#ABABAB;font-size: 15px;font-weight: 200;
}
.data-calendar{
    width: 100%;
    height: 38%;
    margin-top: 2%;
}
.data-select{
    width: 50%;height: 10%;float: right;margin-top: 1%;
}
.data-header{
    width: 100%;
    height: 15%;
    background: #eeeeee;
    padding-left: 5%;
    padding-top: 1.3%;
    font-size: 18px;
    font-weight: 700;
}
.header1{
    width: 28%;height: 100%;float: left;
}
.header2{
    width: 22%;height: 100%;float: left;
}
.header3{
    width: 20%;height: 100%;float: left;
}
.header4{
    width: 30%;height: 100%;float: left;
}
.data-list{
    width: 100%;height: 20%;padding-left: 5%;font-size: 16px;
}
.data-list-on{
    width: 100%;height: 20%;padding-left: 5%;font-size: 16px;background: #F9F9F9;
}
.file-name{
    width: 70%;height: 100%;float: left;margin-left: 8%;padding-left: 10%;
}
.file-name-sn{
    width: 100%;height: 50%;padding-top: 8%;font-size: 18px;
}
.file-name-name{
    width: 100%;height: 50%;padding-bottom: 10%;font-size: 18px;color: #AEAEAE;
}
.sensor-topo{
    width: 100%;height: 20%;background: orange;
}
.dust-list-table{
    width: 100%;height: 65%;
}
.dust-list-title{
    width: 100%;height: 8%;margin-top: 2%;padding-top: 2%;font-size: 16px;
}
.dust-list-title1{
    width: 27%;height: 100%;float: left;padding-left: 5%;
}
.dust-list-title2{
    width: 13%;height: 100%;float: left;
}
.dust-list-title3{
    width: 15%;height: 100%;float: left;
}
.dust-list-title4{
    width: 22%;height: 100%;float: left;
}
.dust-list-title5{
    width: 23%;height: 100%;float: left;
}
.dust-list-detail{
    width: 100%;height: 65%;
}
.dust-list-table1{
    width: 100%;height: 30%;background: #F9F9F9;font-size: 16px;border-top:solid 1px #d1d1d1;border-bottom:solid 1px #d1d1d1;
    margin-bottom: 1%;
}
.dust-list-table2{
    width: 100%;height: 30%;
}
.dust-list-table3{
    width: 100%;height: 30%;
}
.dust-type{
    width: 27%;height: 100%;padding-top: 2.3%;float: left;
}
.type-big{
    width: 28%;height: 75%;border-radius: 15px;background: #B7B7B7;margin-left: 20%;float: left;font-size: 25px;
    font-weight: 500;padding-top: 8%;padding-left: 8%;
}
.type-small1{
    width: 45%;height: 37.5%;float: left;font-size: 18px;padding-top: 3.5%;padding-left: 8%;
}
.type-small2{
    width: 45%;height: 37.5%;float: left;
}
.type-small2-title{
    width: 50%;height: 100%;float: left;padding-left: 17%;
}
.type-small2-img{
    width: 50%;height: 100%;float: left;
}
.dust-state{
    width: 13%;
    height: 100%;float: left;padding-top: 5%;
}
.dust-down-sensor{
    width: 15%;height: 100%;float: left;padding-top: 5%;
}
.dust-down-file{
    width: 22%;height: 100%;float: left;padding-top: 5%;
}
.dust-down-action{
    width: 23%;height: 100%;float: left;padding-top: 2%;
}
.dust-down-button{
    width: 40%;margin-bottom: 2%;
}
.step-img{
    width: 100%;height: 55%;padding-left: 3.5%;padding-right: 2%;padding-top: 2%;
}
.step-first{
    width: 14%;height: 100%;float: left;padding-left: 4%;
}
.step-second{
    width: 14%;height: 100%;float: left;padding-left: 2%;
}
.step-third{
    width: 14%;height: 100%;float: left;padding-right: 2%;
}
.step-forth{
    width: 14%;height: 100%;float: left;padding-right: 10%;
}
.step-arrow{
    width: 14%;height: 100%;float: left;padding-top: 3.4%;
}
.stepdetail{
    width: 100%;height: 14%;font-size: 14px;color: #989898;
}
.stepdetail-one{
    width: 25%;height: 100%;float: left;
}
.stepdetail-two{
    width: 25%;height: 100%;float: left;
}
.stepdetail-three{
    width: 25%;height: 100%;float: left;
}
.stepdetail-four{
    width: 25%;height: 100%;float: left;
}
.step-title{
    width: 100%;height: 20%;font-size: 16px;color: #5D5D5D;font-weight: bold;
}
.steptitle-one{
    width: 25%;height: 100%;float: left;
}
.steptitle-two{
    width: 25%;height: 100%;float: left;
}
.steptitle-three{
    width: 25%;height: 100%;float: left;
}
.steptitle-four{
    width: 25%;height: 100%;float: left;
}
.step-line{
    width: 100%;height: 2%;
}
.wlan-tips{
    width: 100%;height: 8%;background:#FFF7FC;margin-top: 5%;color: #999999;padding-top: 2%;
}
.wlan-tips-img{
    width: 10%;height: 100%;float: left;
}
.wlan-tips-info{
    width: 90%;height: 100%;float: left;
}
.setting-up-img1{
    width: 25%;height: 100%;float: left;padding-top: 6%;padding-left: 5%;
}
.setting-up-img2{
    width: 20%;height: 50%;float: left;margin-top: 14%;padding-left: 5%;
}
.setting-up-center{
    width: 10%;height: 50%;float: left;margin-top: 12%;padding-left: 5%;
}
.setting-up-img3{
    width: 20%;height: 50%;float: left;margin-top: 14%;padding-left: 5%;
}
.setting-up-img4{
    width: 25%;height: 100%;float: left;padding-top: 5%;
}
.top-second{
    padding-left:18%;width: 100%;height: 70px;border-bottom:5px solid transparent;box-shadow: 0 5px 3px #E1E1E1;-moz-opacity:0.15;
}
.fadding-red{
    width: 1%;
    height: 86%;
    float: left;
    margin-top:3%;
    margin-left:8%;
}
.fadding-redinfo{
    width: 100%;
    height: 20%;
    color: red;
    font-size: 18px;
}
.user-title-info{
    width: 100%;
    height: 70%;
    border-left: solid #00C1DE 5px;
    padding-left: 1.5%;
    margin-top: 1%;
}
.system-info-title{
    width: 20%;
    height: 100%;
    padding-top: 4.5%;
    text-align: right;
}
.system-right{
    border: 0px;background: #F8F8F7;width: 45%;height:100%;float: right;margin-right: 24%;
}
.system-info-line{
    width: 100%;height: 3%;float: left;margin-top: 0.5%;
}
.user-information{
    color:#2DA2EA;width: 15%;height: 90%;float: left;font-size: 18px;font-weight: 300;text-align: center;padding-top: 1.2%;
}
.system-information{
    width: 15%;height: 90%;float: left;font-size: 18px;font-weight: 300;text-align: center;padding-top: 1.2%;
}
.system-info-line1{
    width: 7%;height: 100%;background: #2DA2EA;float: left;margin-left: 4%;cursor:pointer;
}
.system-info-line2{
    width: 7%;height: 100%;float: left;margin-left: 8%;cursor: pointer;
}
.index-introduction-title{
    width: 100%;height: 20%;margin-top: 4%;color: #FFFF;font-size: 55px;font-weight: 900;padding-left: 6%;
}
.index-introduction-bottom{
    width: 100%;height: 10%;margin-top:6.5%;color: #FFFFFF;font-size: 21px;
}
.index-introduction-iotxbox{
    width: 25%;height: 100%;float: left;text-align: right;
}
.index-introduction-dusts{
    width: 50%;height: 100%;float: left;text-align: center;
}
.index-introduction-sensors{
    width: 25%;height: 100%;float: left;text-align: left;
}
.down-load{
    background: -moz-linear-gradient(bottom,#3B68B9,#398DD0);
    color: #FFFF;
    height: 60%;
    width: 40%;
    border-radius: 5px;
    border: solid red 0px;
}
.avail-wlan-title{
    width: 58%;height: 100%;float: left;font-size: 16px;padding-top: 1%;padding-left: 2.5%;color: #A4A4A4;
}
.avail-wlan-button{
    width: 30%;height: 100%;float: left;
}
.avail-wlan-finding{
    width: 70%;height: 70%;
    background: -moz-linear-gradient(bottom,#3B68B9,#398DD0);
    border: solid red 0px;
    color: #FFFF;
    margin-top: 1%;
}